@extends('web.master')
@section('head')
    <style>
        /* 代码整理：懒人之家 www.lanrenzhijia.com */
        *{ margin:0; padding:0;}
        body {background: #333;}
        #pageContent {overflow: hidden;position:relative;margin:50px auto;}
        #imgContainer {}
        #positionButtonDiv {background: rgb(58, 56, 63);background: rgba(58, 56, 63, 0.8);border: solid 1px #100000;color: #fff;padding: 8px;text-align: left;position: absolute;right:35px;top:35px;}
        #positionButtonDiv .positionButtonSpan img {float: right;border: 0;}
        .positionMapClass area {cursor: pointer;}
        .zoomButton {border: 0;	cursor: pointer;}
        .zoomableContainer {background-image: url("js/zoom/images/transparent.png");}
    </style>
    @endsection
@section('content')


    <!--代码部分begin-->
    <div id="pageContent">
        <div id="imgContainer">
            <img id="imageFullScreen" src="/images/map1.png"/>
        </div>
     {{--   <div id="positionButtonDiv">
            <p><span> <img id="zoomInButton" class="zoomButton" src="images/zoomIn.png" title="zoom in" alt="zoom in" /> <img id="zoomOutButton" class="zoomButton" src="images/zoomOut.png" title="zoom out" alt="zoom out" /> </span> </p>
            <p>
        <span class="positionButtonSpan">
			<map name="positionMap" class="positionMapClass">
				<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
                <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
				<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
				<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
			</map>
			<img src="images/position.png" usemap="#positionMap" />
         </span>
            </p>
        </div>--}}
    </div>

    <script src="js/zoom/js/e-smart-zoom-jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="http://libs.useso.com/js/html5shiv/3.6/html5shiv.min.js"></script>
    <![endif]-->
    <script>
        $(document).ready(function() {
            $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
            $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
            $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

            function zoomButtonClickHandler(e){
                var scaleToAdd = 0.8;
                if(e.target.id == 'zoomOutButton')
                    scaleToAdd = -scaleToAdd;
                $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
            }
            function moveButtonClickHandler(e){
                var pixelsToMoveOnX = 0;
                var pixelsToMoveOnY = 0;

                switch(e.target.id){
                    case "leftPositionMap":
                        pixelsToMoveOnX = 50;
                        break;
                    case "rightPositionMap":
                        pixelsToMoveOnX = -50;
                        break;
                    case "topPositionMap":
                        pixelsToMoveOnY = 50;
                        break;
                    case "bottomPositionMap":
                        pixelsToMoveOnY = -50;
                        break;
                }
                $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
            }
        });
    </script>
    <!--代码部分end-->


@endsection